<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="icon" type="image/x-icon" href="/image/favicon.ico">
    <link href="/css/detail.css" rel="stylesheet">
    <title>Title</title>
    <script>
        window.requestAnimFrame = (function() {
            return (
                window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback);
                }
            );
        });

        function init(elemid) {
            let canvas = document.getElementById(elemid),
                c = canvas.getContext("2d"),
                w = (canvas.width = window.innerWidth),
                h = (canvas.height = window.innerHeight);
            c.fillStyle = "rgba(30,30,30,1)";
            c.fillRect(0, 0, w, h);
            return {c:c,canvas:canvas};
        }
    </script>
</head>
<body>
<canvas id="canvas"></canvas>
<div id="content" style="overflow:hidden">
    <div class="row">
        <div class="col-md-4">
            <div class="img-circle">
                <img id="musicImg" th:src="${detail.pic}" width="300px"/>
            </div>
            <div id="left-top">
                <span>♫</span><span>ds</span><span>Music</span>
            </div>
        </div>
        <div class="col-md-4"><div id="music-name"><span th:text="${detail.name}"></span>:===:
            <span th:text="${detail.artist}"></span></div>

            <div id="scrolling">
                <div id="main-right">
                    <table cellpadding="4px" width="100%">
                        <tr th:each="lyric:${lyrics}">
                            <td th:text="${lyric.lineLyric}"></td>
                        </tr>
                    </table>
                </div>
            </div></div>
        <div class="col-md-4"><div id="left-main">
            <div id="bfqs">
                <div id="spbfq" style="display: none;">视频播放器:</div>
                <video style="display: none;" controls="controls"></video>
                <div id="ypbfq">音频播放器:</div>
                <audio id="bfq" controls="controls" th:src="${detail.mp3Url}"></audio>
            </div>
        </div></div>
    </div>
    <div id="main-left">



        <!--<video controls="controls" id="vdo"></video>-->
    </div>

</div>
<script>
    let mp4_url = "[[${detail.mp4Url}]]"
    if (mp4_url === ""){
        //说明没有获取到MP4url
        //不做任何处理
        console.log("请联系2103784735@qq.com")
    }else{
        $("video").removeAttr("style");
        $("video").attr("src",mp4_url);
        $('#spbfq').removeAttr("style");
    }
    let time_list = [[${timeList}]]
    time_list.unshift(0)
    console.log(time_list)
    let mp3_curtime="[[${lyrics}]]"
    let i = 0;
    window.setInterval(function (){
        if (document.querySelector("audio").paused){
            //ture 表示已经暂停
            $("#musicImg").css("animation-play-state","paused");
            // $("#main-right").css("top","-10px");
        }else {
            //设置歌词滚动
            $("#musicImg").css("animation-play-state", "running");
            // 判断如果播放器时间正好等于list[i]的时间
            if (document.querySelector("audio").currentTime >= time_list[i]){
                console.log(i+"  "+time_list[i] +"  "+document.querySelector("audio").currentTime )
                if (i>=2){
                    document.querySelector("tr:nth-of-type(" + i + ")").style.fontWeight="800";
                    document.querySelector("tr:nth-of-type(" + (i-1) + ")").style.fontWeight="400";
                    i++
                }else {
                    document.querySelector("tr:nth-of-type(1)").style.fontWeight="600";
                    i++
                }
            }else if (document.querySelector("audio").currentTime){
                i = 0
            }
            if (document.querySelector("audio").currentTime > 40) {
                $("#main-right").css("top", (-1) * (document.querySelector("audio").currentTime-40) * (document.querySelector("#main-right").scrollHeight / document.querySelector("audio").duration) + "px");
            }else{
                $("#main-right").css("top","0px")
            }
        }
        if (document.querySelector("audio").ended){
            document.querySelector("audio").currentTime=0
        }
    },100);

</script>
<script>
    var canvas = document.querySelector('canvas');
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    c = canvas.getContext('2d');

    window.addEventListener('resize', function () {
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;

        initCanvas();
    })

    var mouse = {
        x: undefined,
        y: undefined
    }
    window.addEventListener('mousemove',
        function (event) {
            mouse.x = event.x;
            mouse.y = event.y;
            drawCircles();
        }
    )
    window.addEventListener("touchmove",
        function (event) {
            let touch = event.touches[0];
            mouse.x = touch.clientX;
            mouse.y = touch.clientY;
            drawCircles();
        }
    )

    function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.minRadius = radius;
        this.vx = vx;
        this.vy = vy;
        this.birth = birth;
        this.life = life;
        this.opacity = opacity;

        this.draw = function () {
            c.beginPath();
            c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
            c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')';
            c.fill();
        }

        this.update = function () {
            if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
                this.vx = -this.vx;
            }

            if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
                this.vy = -this.vy;
            }

            this.x += this.vx;
            this.y += this.vy;

            this.opacity = 1 - (((frame - this.birth) * 1) / this.life);

            if (frame > this.birth + this.life) {
                for (let i = 0; i < circleArray.length; i++) {
                    if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) {
                        circleArray.splice(i, 1);
                        break;
                    }
                }
            } else {
                this.draw();
            }
        }

    }

    var circleArray = [];

    function initCanvas() {
        circleArray = [];
    }

    var colorArray = [
        '355,85,80',
        '9,80,100',
        '343,81,45',
        '0,255,127',
        '255,126,154'
    ]

    function drawCircles() {
        for (let i = 0; i < 6; i++) {
            let radius = Math.floor(Math.random() * 4) + 2;
            let vx = (Math.random() * 2) - 1;
            let vy = (Math.random() * 2) - 1;
            let spawnFrame = frame;
            let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
            let life = 100;
            circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));

        }
    }

    var frame = 0;
    function animate() {
        requestAnimationFrame(animate);
        frame += 1;
        c.clearRect(0, 0, innerWidth, innerHeight);
        for (let i = 0; i < circleArray.length; i++) {
            circleArray[i].update();
        }

    }

    initCanvas();
    animate();


    for (let i = 1; i < 110; i++) {
        (function (index) {
            setTimeout(function () {
                mouse.x = 100 + i * 10;
                mouse.y = 100;
                drawCircles();
            }, i * 10);
        })(i);
    }
</script>
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<!--小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json-->
<!--萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json-->
<!--小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json-->
<!--小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json-->
<!--初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json-->
<!-- 上边的不同链接显示的是不同的小人，这个可以根据需要来选择 下边的初始化部分，可以修改宽高来修改小人的大小，或者是鼠标移动到小人上的透明度，也可以修改小人在页面出现的位置。 -->
<script>
    /*https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json*/
    L2Dwidget.init({ "model": { jsonPath:
                "https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",
            "scale": 1 }, "display": { "position": "right", "width": 220, "height": 300,
            "hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
        "react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
</script>
</body>
</html>